<template>
  <div class="studentGrade">
    <div class="gradeTitle"><svg t="1631930379975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10366" width="24" height="24"><path d="M161.629 850.344V146.896h-56.702v760.148h814.909v-56.7z" p-id="10367" fill="#909399"></path><path d="M221.36 602.525v160.191c0 43.88 68.052 43.88 68.052 0V602.525c0-43.883-68.052-43.883-68.052 0zM417.17 455.569v304.769c0 43.879 68.052 43.879 68.052 0V455.569c-0.001-43.884-68.052-43.884-68.052 0zM630.281 567.363v192.975c0 43.879 68.054 43.879 68.054 0V567.363c0-43.883-68.054-43.883-68.054 0zM847.521 453.629v308.645c0 43.883 68.052 43.883 68.052 0V453.629c0-43.882-68.052-43.882-68.052 0z" p-id="10368" fill="#909399"></path><path d="M897.731 162.486l-31.202-28.905-214.363 231.293-191.502-95.19-1.483 2.985-1.411-2.57-223.812 122.732 20.459 37.266 206.061-112.996 201.034 99.929 0.098-0.195 0.21 0.195z" p-id="10369" fill="#909399"></path></svg>&nbsp;&nbsp;学生成绩</div>
    <div class="termSelect" v-if="Loaded">
      <el-select class="selectT" placeholder="请选择学期" v-model="currentTerm" :popper-append-to-body="false">
        <el-option v-for="it in termArray" :key="it" :label="it.label" :value="it.value"></el-option>
      </el-select>
    </div>
    <div class="gradeDisplay">
      <div v-if="!Loaded">
        <el-result style="width: 100%;height: 400px">
          <template #icon>
            <div :class="`resultIconBase ${emptyIcon.Class}`">
              <i :class="emptyIcon.Icon"></i>
            </div>
          </template>
          <template #title>
            <span class="resultTitle">{{emptyTip}}</span>
          </template>
          <template #extra>
            <div class="retryButton" v-if="fetchFailed" @click="retryFetch">
              <span>重试</span><el-button class="retry" type="primary" circle icon="el-icon-refresh-right"></el-button>
            </div>
          </template>
        </el-result>
      </div>
      <el-container v-else>
        <el-timeline
          v-if="currentTerm === 99"
          style="width: 90%"
        >
          <el-timeline-item
          class="timelineItem"
          v-for="(it, index) in scoreSet"
          :key="index"
          >
            <term-card :term-score="it" :termTitle="termArray[index].label"></term-card>
          </el-timeline-item>
        </el-timeline>
        <term-card v-else :term-score="scoreSet[currentTerm]" :termTitle="termArray[currentTerm].label"></term-card>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch, reactive } from 'vue'
import { useStore } from 'vuex'
import termOption from '@/assets/PublicInterface/ComponentInterfaces/studentPage/studentGrade/termOption'
import termCard from '@/components/studentPage/studentGarde/termCard.vue'
import getScore from '@/assets/PublicFunction/AxiosFunctions/studentGrade/getScore'
import scoreState from '@/assets/PublicStaticValue/AxiosCustomState/getScore/scoreState'
export default {
  name: 'studentGrade',
  components: {
    termCard
  },
  setup () {
    const Store = useStore()
    const currentTerm = ref(99)
    const termArray = ref(new Array<termOption>())
    const scoreSet = ref()
    const Loaded = ref(false)
    const emptyTip = ref('正在获取信息 ...')
    const grades = ['一', '二', '三', '四']
    const emptyIcon = reactive({
      Class: 'resultLoading',
      Icon: 'el-icon-loading'
    })
    const fetchFailed = ref(false)
    function handleResp (resp: any) {
      if (resp.statusText === 'OK') {
        emptyTip.value = '成功获取到成绩信息 !'
        emptyIcon.Class = 'resultSuccess'
        emptyIcon.Icon = 'el-icon-check'
        scoreSet.value = Object.values(resp.data.score_list)
        for (let i = 0; i < scoreSet.value.length; i++) {
          termArray.value.push({
            label: `大${grades[Math.floor(i / 2)]}${i % 2 ? '下' : '上'}学期`,
            value: i
          })
        }
        termArray.value.push({
          label: '全选',
          value: 99
        })
        console.log(scoreSet.value)
        setTimeout(() => {
          Loaded.value = true
        }, 500)
      } else {
        fetchFailed.value = true
        emptyTip.value = '未查询到数据 !'
        emptyIcon.Class = 'resultWarning'
        emptyIcon.Icon = 'el-icon-warning'
      }
    }
    function handleError (Error: any) {
      fetchFailed.value = true
      emptyTip.value = '网络错误 !'
      emptyIcon.Class = 'resultError'
      emptyIcon.Icon = 'el-icon-close'
    }
    getScore(Store.getters['CurrentAccount/getCurrentAccount'], handleResp, handleError)
    function retryFetch () {
      fetchFailed.value = false
      emptyTip.value = '正在获取信息 ...'
      emptyIcon.Class = 'resultLoading'
      emptyIcon.Icon = 'el-icon-loading'
      getScore(Store.getters['CurrentAccount/getCurrentAccount'], handleResp, handleError)
    }
    return {
      termArray, currentTerm, scoreSet, emptyTip, fetchFailed, retryFetch, emptyIcon, Loaded
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/Fonts/FontMap/FontMap";
@import "../../assets/Fonts/FontMap/FontList.css";
.studentGrade{
  border: 1px solid #DCDFE6;
  box-shadow: 0 0 2px 0.5px rgba(0,0,0,0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .gradeTitle{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #909399;
    font-size: 20px;
    font-family: $SH_Serif_Regular;
    font-weight: bold;
  }
}
.termSelect{
  margin-top: 10px;
  margin-bottom: 30px;
}
.gradeDisplay{
  width: 100%;
  height: fit-content;
}
.resultIconBase{
  width: 120px;
  height: 120px;
  border-radius: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  i{
    color: white;
    font-size: 72px;
  }
}
.resultTitle{
  font-size: 24px;
  font-family: $Mi_Lan;
}
.resultSuccess{
  background-color: rgb(103, 194, 58);
}
.resultLoading{
  background-color: rgb(144, 147, 153);
}
.resultError{
  background-color: rgb(245, 108, 108);
}
.resultWarning{
  background-color: rgb(230, 162, 60);
}
.retryButton{
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  color: rgb(64, 158, 255);
  border: 2px solid rgb(64, 158, 255);
  border-radius: 22px;
  cursor: pointer;
  span{
    margin-left: 15px;
    line-height: 0;
    font-family: $Mi_Lan;
    font-size: 18px;
  };
  .retry{
    width: 43px;
    height: 43px;
    position: absolute;
    right: -2px;
  }
}
.selectT{
  font-family: $SH_Serif_Regular;
  *{
    font-family: $SH_Serif_Regular;
    text-align: left;
  }
}
.timelineItem{
  width: 100%;
}
</style>
